<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            #box {
                width: 800px;
                height: 450px;
                overflow: hidden;
                position: relative;
            }
            #box-container {
                display: flex;
                width: 800px;
                position: absolute;
                transition: 0.5s all ease;
            }
            img {
                width: 800px;
                height: 450px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="box-container">
                <img src="./img/1fcb339847a87291b289e5f2b6f6858c.jpeg" alt="" />
                <img src="./img/574e5ba374e8b3b2cac7ecac299998df.jpeg" alt="" />
                <img src="./img/8e4aa9076140242d389376d20b69be0d.jpeg" alt="" />
                <img src="./img/9921a46c8dd13daa5b54214268f565bf.jpeg" alt="" />
            </div>
        </div>
        <div id="btn">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button>
        </div>
        <script>
            let box = document.getElementById("box");
            let boxContainer = document.getElementById("box-container");
            let img=boxContainer.querySelectorAll("img");
            console.log(img)
            let btn = document.querySelectorAll("button");
            let imgWidth = getComputedStyle(img[1])["clineWidth"]
            console.log(imgWidth);
            for (let i = 0; i < btn.length; i++){
                btn[i].onclick = function () {
                boxContainer.style.left = -i * 800 + "px";
            };
            }
            // btn[0].onclick = function () {
            //     boxContainer.style.left = -0 * 800 + "px";
            // };
            // btn[1].onclick = function () {
            //     boxContainer.style.left = -1 * 800 + "px";
            // };
            // btn[2].onclick = function () {
            //     boxContainer.style.left = -2 * 800 + "px";
            // };
            // btn[3].onclick = function () {
            //     boxContainer.style.left = -3 * 800 + "px";
            // };
        </script>
    </body>
</html>
